<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝网-淘！我喜欢</title>
    <link rel="stylesheet" href="demo.css">
</head>

<body>
    <div class="wrapper">
        <div class="top-nav-wra">
            <div class="top-nav">
                <ul class="top-nav-l">
                    <li class="top-nav-menu china">
                        <span class="chinaSpan">中国大陆</span>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu loginandReg">
                        <a href="#" class="login">亲，请登录</a>
                        <a href="#" class="reg">免费注册</a>
                    </li>
                    <li class="top-nav-menu phone">
                        <a href="#">手机逛淘宝</a>
                    </li>
                </ul>
                <ul class="top-nav-r">
                    <li class="top-nav-menu myTaobao">
                        <a href="#">我的淘宝</a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu shopCar">
                        <a href="#">
                            <span class="bgPic shopCarPic"></span>
                            <span>购物车</span>
                        </a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu like">
                        <a href="#">
                            <span class="bgPic likePic"></span>
                            <span>收藏夹</span>
                        </a>

                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu goods">
                        <a href="#">商品分类</a>
                    </li>
                    <li class="top-nav-menu cutOff">
                        <span>|</span>
                    </li>
                    <li class="top-nav-menu seller">
                        <a href="#">卖家中心</a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu customer">
                        <a href="#">联系客服</a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu webNav">
                        <a href="#">
                            <span class="bgPic webNavPic"></span>
                            <span>网站导航</span>
                        </a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="search-wrap">
            <div class="search-con">
                <div class="logo-box"></div>
                <div class="search-box">
                    <div class="search-bd">
                        <div class="search-tab">
                            <ul>
                                    <li class="select">宝贝</li>
                                    <li>天猫</li>
                                    <li>店铺</li>
                                </ul>
                        </div>
                        <div class="search-panel">
                            <a href="#" class="sousuo"></a>
                            <form action="">
                                <div class="btn">
                                    <button type="submit">搜索</button>
                                </div>
                                <div class="search-inp-box">
                                    <div class="search-inp">
                                        <input type="text" placeholder="春款 女装">
                                    </div>
                                </div>
                            </form>
                            <a href="#" class="camera"></a>
                            
                        </div>
                    </div>
                    <div class="search-ft">
                        <ul>
                            <li class="select"><a href="#">时尚女包</a></li>
                            <li><a href="#">沙滩裙</a></li>
                            <li><a href="#">夏季连衣裙</a></li>
                            <li><a href="#">夹克外套</a></li>
                            <li class="select"><a href="#">夹克</a></li>
                            <li><a href="#">定制窗帘</a></li>
                            <li><a href="#">衬衫</a></li>
                            <li><a href="#">沙发</a></li>
                            <li><a href="#">妈妈装</a></li>
                            <li><a href="#">新款男鞋</a></li>
                            <li><a href="#">童装</a></li>
                            <li><a href="#">男装</a></li>
                        </ul>
                        <a href="#" class="more">更多></a>
                    </div>
                </div>
                <div class="code-box">
                    <a href="#" class="p-tb">手机淘宝</a>
                    <a href="#" class="code"></a>
                    <a href="#" class="close">x</a>
                </div>
            </div>
        </div>
        <div class="scrren-nav">
            <div class="scrren-nav-con">
                <h2>主题市场</h2>
                <ul>
                    <li>
                        <a href="#">天猫</a>
                    </li>
                    <li>
                        <a href="#">聚划算</a>
                    </li>
                    <li>
                        <a href="#">天猫超市</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">|</a>
                    </li>
                    <li>
                        <a href="#">淘抢购</a>
                    </li>
                    <li>
                        <a href="#">电器城</a>
                    </li>
                    <li>
                        <a href="#">司法拍卖</a>
                    </li>
                    <li>
                        <a href="#">中国制造</a>
                    </li>
                    <li>
                        <a href="#">兴农扶贫</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">|</a>
                    </li>
                    <li>
                        <a href="#">飞猪旅行</a>
                    </li>
                    <li>
                        <a href="#">智能生活</a>
                    </li>
                    <li>
                        <a href="#">苏宁易购</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="scrren-box">
            <div class="main">
                <div class="main-inner">
                    <div class="inner-left">
                        <ul>
                            <li>
                                <a href="#">女装</a> /
                                <a href="#">男装</a> /
                                <a href="#">内衣</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">鞋靴</a> /
                                <a href="#">箱包</a> /
                                <a href="#">配件</a>
                                <span></span>

                            </li>
                            <li>
                                <a href="#">家电</a> /
                                <a href="#">数码</a> /
                                <a href="#">手机</a>
                                <span></span>

                            </li>
                            <li>
                                <a href="#">美妆</a> /
                                <a href="#">洗护</a> /
                                <a href="#">保健品</a>
                                <span></span>

                            </li>
                            <li>
                                <a href="#">珠宝</a> /
                                <a href="#">眼镜</a> /
                                <a href="#">手表</a>
                                <span></span>

                            </li>
                            <li>
                                <a href="#">运动</a> /
                                <a href="#">户外</a> /
                                <a href="#">乐器</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">游戏</a> /
                                <a href="#">动漫</a> /
                                <a href="#">影视</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">美食</a> /
                                <a href="#">生鲜</a> /
                                <a href="#">零食</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">鲜花</a> /
                                <a href="#">宠物</a> /
                                <a href="#">农资</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">房产</a> /
                                <a href="#">装修</a> /
                                <a href="#">建材</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">家具</a> /
                                <a href="#">家饰</a> /
                                <a href="#">家纺</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">汽车</a> /
                                <a href="#">二手车</a> /
                                <a href="#">用品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">办公</a> /
                                <a href="#">DIY</a> /
                                <a href="#">五金电子</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">百货</a> /
                                <a href="#">厨具</a> /
                                <a href="#">家庭保健</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">学习</a> /
                                <a href="#">卡券</a> /
                                <a href="#">本地服务</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">女装</a> /
                                <a href="#">男装</a> /
                                <a href="#">内衣</a>
                                <span></span>
                            </li>
                        </ul>
                    </div>
                    <div class="inner-content">
                        <div class="pic-box">
                            <a href="#"></a>
                            <ul class="list">
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#" class="selected"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                            </ul>
                        </div>
                        <div class="inner-mall">
                            <div class="head">
                                <span class="tm-pic"></span>
                                <span class="tm">理想生活上天猫</span>
                            </div>
                            <a href="#" class="pic-show"></a>
                        </div>
                    </div>
                </div>
                <div class="main-bottom">
                    <div class="bottom-content">
                        <div class="left-logo"></div>
                        <a href="#" class="content-tt">
                            <img src="img/pic5.png" alt="">
                            <h4>皇冠概念车/新世纪等 2017东京车展前瞻</h4>
                            <p>[汽车之家新闻]两年一度的东京车展即将在10月25日正式开幕，作为日系厂家的本土主场，本届车展上丰田、本田、日产、铃木、雷克萨斯、马自达、斯巴鲁等厂家都将在车展上发布自己的最新产品，包括全新皇冠概念车、丰田TjCruiser、丰田GRHVSPORTS、全新Supra、全新世纪、三</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-middle">
                <a href="#" class="middle-pic1"></a href="#">
                <div class="middle-pic2">
                    <span>今日热卖</span>
                    <a href="#"></a>
                </div>
            </div>
            <div class="col-right">
                <div class="member">
                    <div class="member-bd">
                        <div class="tx">
                            <a href="#"></a>
                        </div>
                        <span class="info">Hi!你好</span>
                        <p>
                            <a href="#" class="icon">
                                <span></span>
                                领淘金币抵钱</a>
                            <a href="#" class="club">
                                <span></span>
                                会员俱乐部
                            </a>
                        </p>
                    </div>
                    <div class="member-tf">
                        <a href="#" class="login">登录</a>
                        <a href="#">注册</a>
                        <a href="#">开店</a>
                    </div>
                </div>
                <div class="message">
                    <a href="#">网上有害信息举报专区
                        <span></span>
                    </a>
                </div>
                <div class="notice">
                    <ul class="title">
                        <li>
                            <a href="#">公告</a>
                        </li>
                        <li>
                            <a href="#">规则</a>
                        </li>
                        <li>
                            <a href="#" class="select">论坛</a>
                        </li>
                        <li>
                            <a href="#">安全</a>
                        </li>
                        <li>
                            <a href="#">公益</a>
                        </li>
                    </ul>
                    <ul class="content">
                        <li>
                            <a href="#" class="select">阿里员工疯了</a>
                        </li>
                        <li>
                            <a href="#">评价管理功能上线</a>
                        </li>
                        <li>
                            <a href="#">正确的品牌营销推广</a>
                        </li>
                        <li>
                            <a href="#">2018年消费者趋势</a>
                        </li>
                    </ul>
                </div>
                <div class="module">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="icon1"></span>
                                <p>充话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon2"></span>
                                <p>旅行</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon3"></span>
                                <p>车险</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon4"></span>
                                <p>游戏</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon5"></span>
                                <p>彩票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon6"></span>
                                <p>电影</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon7"></span>
                                <p>酒店</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon8"></span>
                                <p>理财</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon9"></span>
                                <p>找服务</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon10"></span>
                                <p>演出</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon11"></span>
                                <p>水电煤</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon12"></span>
                                <p>火车票</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="app">
                    <h3>阿里APP
                        <a href="#" class="more">更多></a>
                    </h3>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo1.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo2.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo3.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo4.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo5.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo6.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo7.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo8.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo9.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/smalllogo10.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>



</body>

</html>